<template>
  <div>
    <el-form class="row" :model="queryParams" ref="queryForm" size="small" :inline="true"
             label-width="68px">
      <el-form-item label="项目" prop="projectId">
        <el-select v-model="selectValue"
                   placeholder="请选择项目"
                   @change="selectChange()"
                   clearable>
          <el-option v-for="item in projectList" :key="item.projectId" :label="item.projectName"
                     :value="item.projectId">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div>
      <el-row class="row">
        <el-col align="center" :span="4" v-for="(item,index) in orderStatistics">
          <div>
            <div  :class="generateClassName(index)" >
              <span style="font-size: 40px;line-height: 110px">{{ item.count }}</span>
            </div>
            <div class="cardSpan">
              <span>{{ item.name }}</span><br>
            </div>
            <div class="cardSpan" >
              <span>截止日期:</span>
              <span>{{ item.end?item.end.substring(0,10):"" }}</span>
            </div>
          </div>
        </el-col>






      </el-row>

    </div>
  </div>
</template>
<script>
import {listProjectByUserId} from "@/api/project/project";
import {getOrderStatisticsByProjectId} from "@/api/prodata/orderStatistics"

export default {
  name: "orderStatistics",
  data() {
    return {
      // 项目id
      selectValue:null,
      // 项目列表
      projectList: [],
      // 图表数据
      orderStatistics: [],
      // 查询参数
      queryParams: {
      }
    }
  },
  created() {
    this.getListProject();
    this.getList()
  },
  methods: {
    /** 用户能看见的项目列表 */
    getListProject() {
      listProjectByUserId().then(response => {
        this.projectList = response.data;
      });
    },
    selectChange() {

      this.getList();
    },
    /** 查询月度形象图列表 */
    getList() {
      // 向查询列表页添加项目id
      if (this.selectValue){
        this.queryParams.projectId = this.selectValue
      } else {
        this.queryParams.projectId = -1
      }
      getOrderStatisticsByProjectId(this.queryParams.projectId).then(response => {
        this.orderStatistics = response.data;
        console.log(this.orderStatistics)
      });
    },
    generateClassName(index) {
      return 'card' + index%4;
    }
  }
}
</script>


<style scoped lang="scss">
.cardSpan{
  margin-top: 10px;
}

.card0{
  border: 1px solid #000000;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #cc9933;
}
.card1{
  border: 1px solid #000000;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #0065ff;
}
.card2{
  border: 1px solid #000000;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #ff9900;
}
.card3{
  border: 1px solid #000000;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #00ff00;
}

.row{
  margin-top: 20px;
}
</style>
